<template>
  <Layout class="body">
    <Header>
      <div class="logo">
        admin
      </div>
      <div class="avatar">
        <Dropdown>
          <a href="javascript:void(0)">
            <Avatar icon="ios-person" size="large"/>
          </a>
          <DropdownMenu slot="list">
            <DropdownItem>修改信息</DropdownItem>
            <DropdownItem @click.native="logout">退出系统</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </Header>
    <Layout>
      <Sider hide-trigger>
        <Menu v-if="menus" theme="dark" width="auto" :active-name="getSelect" :open-names="[ getOpenSelect ]" >
          <Submenu v-for="v in menus" :name="v.id" :key="v.id">
            <template slot="title">
              <Icon :type="v.icon" size="18"/> {{v.name}}
            </template>
            <MenuItem v-for="c in v.children" :name="c.id" :key="c.id">
              <router-link :to="c.url" tag="div" @click.native="menuSelect(c.id, v.id)" :style="{ width: '100%', height: '100%' }"><Icon :type="c.icon" size="18"/> {{c.name}}</router-link>
            </MenuItem>
          </Submenu>
        </Menu>
      </Sider>
      <Content>
        <router-view></router-view>
      </Content>
    </Layout>
  </Layout>
</template>

<script>
import { getMenu } from '@/api/menu'
import { logout } from '@/api/login'

export default {
  name: 'Index',
  mounted () {
    getMenu().then(res => {
      if (res.code === 200) {
        this.menus = res.data.menus
      }
    })
  },
  methods: {
    logout () {
      logout().then(res => {
        this.$Message.success(res.msg)
        sessionStorage.removeItem('token')
        sessionStorage.removeItem('select-item')
        this.$router.replace('login')
      })
    },
    menuSelect (name, parent) {
      sessionStorage.setItem('select-item', name)
      sessionStorage.setItem('select-open', parent)
    }
  },
  data () {
    return {
      menus: null
    }
  },
  computed: {
    getSelect () {
      return parseInt(sessionStorage.getItem('select-item') ? sessionStorage.getItem('select-item') : 0)
    },
    getOpenSelect () {
      return parseInt(sessionStorage.getItem('select-open') ? sessionStorage.getItem('select-open') : 0)
    }
  }
}
</script>

<style scoped lang="scss">
.body {
  width: 100%;
  height: 100%;
}
.logo {
  color: #EEE;
  font-size: 30px;
  width: 200px;
  line-height: 64px;
  float: left;
}
.avatar {
  float: right;
  color: #EEEEEE;
}
</style>
